<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
	</head>
	    <style>
	    	*{padding: 0;margin: 0;}
	    	/*最外层大框*/
	    	#box{
	    	
	    		width: 702px;
	    		height: 378px;
	    		background: url(flash_sale.png);
	            margin: 0 auto;
	    		/*父元素设置定位，为了子元素根据它进行相对定位*/
	    /*		position: absolute;*/
	    		
	    	}
	    	/*内部4个小框*/
	    	#box div{
	    		width: 50px;
	    		height: 50px;
	    		border: 1px solid gainsboro;
	    		float: left;
	    		position: relative;
	    		top: 260px;
	    		left:300px;
	    		margin-left: 10px;
	    		text-align: center;
	    		line-height: 50px;
	    	}
	    </style>
	<body>
		<div id="box">
		    <div id="day"></div>
		    <div id="hour"></div>
		    <div id="minute"></div>
		    <div id='seconds'></div>
		    </div>
		</div>
		<script>
			/*1.获取结束时间（转成毫秒）：当前时间的2天后
			 *2.定义函数：
			 *获取剩余时间：结束时间 -当前时间
			 *剩余时间显示在页面4个框 
			 * 3.计时器每隔1秒执行函数*/
			//当前时间
			var now=new Date();
			//结束时间的毫秒数：当前时间的毫秒数加上2天后的毫秒数
				var endSeconds=now.getTime()+5*1000;
		    //var endSeconds=new Date('2018-06-05 11:10:00').getTime();
			var day=hour=minute=seconds=0;
			function seckill(){
				var nowtime=new Date();
				//获取剩余时间（秒数）
				var remain=(endSeconds - nowtime.getTime()) /1000;
				if(remain>0){
					//把秒转换成天，小时，分钟，秒
				var day=parseInt(remain/(60*60*24));
				var hour=parseInt((remain/(60*60))%24);
				var minute=parseInt((remain/60)%60);
				var seconds=parseInt(remain%60);
				}else{
					clearInterval(timer);
					day=hour=minute=seconds=0;
					//window.location.href='秒杀2.html';
				}
				//用两位数表示天，小时，分钟，秒
				day=(day<10?'0'+day:day);
				hour=hour<10?'0'+hour:hour;
				minute=minute<10?'0'+minute:minute;
				seconds=seconds<10?'0'+seconds:seconds;
				//剩余天，小时，分钟，秒 显示在页面上
		         document.getElementById('day').innerHTML=day+'天';
			     document.getElementById('hour').innerHTML=hour+'时';
			     document.getElementById('minute').innerHTML=minute+'分';
			     document.getElementById('seconds').innerHTML=seconds+'秒';
			}
			//计时器循环执行
		var timer=window.setInterval(seckill,1000);
		</script>
		
	</body>
</html>
